<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI聊天网页</title>
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        /* background-color: #f4f4f9; */

        position: relative; /* 为 body 设置相对定位 */
        background: -webkit-linear-gradient(90deg, #16a75f, #aae68d); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(90deg, #16a75f, #aae68d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }

      #chat-container {
        width: 800px;
        position: relative; /* 为 chat-container 设置相对定位 */
      }

      #chatbox {
        border: 1px solid #ccc;
        border-bottom: none; /* 去除下边框 */
        border-right: none;
        padding: 10px;
        height: calc(100vh - 180px); /* 调整高度以适应 inputbox */
        overflow-y: scroll;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.3); /* 半透明的白色背景 */
        backdrop-filter: blur(10px); /* 添加模糊效果 */
      }

      #inputbox {
        margin-top: 10px;
        display: flex;
        width: 100%; /* 宽度与 chat-container 一致 */
        padding: 10px 0; /* 添加内边距，使输入框和按钮更美观 */
        border-radius: 4px;
      }

      #user_input {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
        margin-left: 10px;
      }

      button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background-color: #0056b3;
      }

      .message {
        margin: 5px 0;
        display: flex;
        align-items: start;
      }

      .message img {
        width: 24px;
        height: 24px;
        margin: 0 5px;
      }

      .user-message {
        justify-content: flex-end;
      }

      .ai-message {
        justify-content: flex-start;
      }

      .message p {
        margin: 0;
        padding: 8px;
        border-radius: 4px;
      }

      .user-message p {
        background-color: #e0f7fa;
      }

      .ai-message p {
        background-color: #f1f8e9;
      }
    </style>
  </head>

  <body>
    <!-- 添加一个容器来包裹聊天框和输入框 -->
    <div id="chat-container">
      <div style="display: flex; align-items: center; justify-content: center">
        <h1>ChatGLM-Plus</h1>
      </div>
      <div id="chatbox">
        <script>
          const chatbox = document.getElementById('chatbox')
          const userAvatar = 'https://sfile.chatglm.cn/activeimg/bdms/66135a5a1bfb5b0037b2bd52'
          const aiAvatar = 'https://chatglm.cn/img/pc_20speed-min.e4bebda4.gif'

          const userMessages = [
            '你好，AI！',
            '今天天气怎么样？',
            '推荐一部好看的电影',
            '如何学习编程？',
            '有什么好吃的餐厅？',
            '介绍一下历史上的今天',
            '怎样提高英语水平？',
            '分享一首好听的歌曲',
            '最近有什么热门的游戏？',
            '能讲个笑话吗？',
            '明天有什么重要的体育赛事？',
            '推荐几本好书',
            '怎样做好时间管理？',
            '适合旅游的国内城市有哪些？',
            '如何进行有效的健身？',
            '有什么好的摄影技巧？',
            '推荐一些适合上班族的早餐',
            '如何缓解工作压力？',
            '未来科技有哪些发展趋势？',
            '怎样培养良好的阅读习惯？'
          ]

          const aiMessages = [
            '你好！有什么我可以帮忙的？',
            '我不太清楚今天的天气，你可以查看天气预报网站。',
            '推荐《泰坦尼克号》，经典爱情电影。',
            '可以从基础语法学起，多做练习和项目。',
            '可以试试当地的特色餐厅，比如川菜馆。',
            '历史上的今天发生了很多重要事件，你可以搜索相关资料。',
            '多听多说多读多写，参加英语角。',
            '推荐周杰伦的《青花瓷》。',
            '最近热门的游戏有《原神》《王者荣耀》。',
            '小王剪了个中分，变成了小全。',
            '我不清楚明天具体的体育赛事，你可以关注体育新闻网站。',
            '推荐《百年孤独》《平凡的世界》。',
            '制定计划，合理安排任务优先级。',
            '成都、杭州、丽江都是不错的旅游城市。',
            '制定适合自己的健身计划，坚持锻炼。',
            '注意光线、构图和角度。',
            '可以选择面包、牛奶、鸡蛋等。',
            '可以通过运动、听音乐等方式缓解。',
            '人工智能、量子计算等领域发展迅速。',
            '设定阅读目标，每天安排固定时间阅读。'
          ]

          for (let i = 0; i < 20; i++) {
            // 添加用户消息
            chatbox.innerHTML += `
      <div class="message user-message">
        <p> ${userMessages[i]}</p>
        <img src="${userAvatar}" alt="User Avatar">
      </div>
    `
            // 添加 AI 消息
            chatbox.innerHTML += `
      <div class="message ai-message">
        <img src="${aiAvatar}" alt="AI Avatar" style="border-radius:20px">
        <p>${aiMessages[i]}</p>
      </div>
    `
          }
        </script>
      </div>
      <div style="display: flex; align-items: center; justify-content: center">
        <div id="inputbox">
          <input type="text" id="user_input" placeholder="输入消息" />
          <div style="display: flex; align-items: center; justify-content: center">
            <button onclick="sendMessage()">
              <i class="fa-solid fa-paper-plane"></i>
            </button>
          </div>
        </div>
      </div>
    </div>

    <script>
      function sendMessage() {
        const user_input = document.getElementById('user_input').value;
        if (user_input) {
          const chatbox = document.getElementById('chatbox');
          // 添加用户消息
          chatbox.innerHTML += `
            <div class="message user-message">
              <p>${user_input}</p>
              <img src="https://sfile.chatglm.cn/activeimg/bdms/66135a5a1bfb5b0037b2bd52" alt="User Avatar">
            </div>
          `;
          chatbox.scrollTop = chatbox.scrollHeight;

          fetch('/chat', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify({ user_input: user_input })
          })
          .then(response => response.json())
          .then(data => {
            const aiMessageDiv = document.createElement('div');
            aiMessageDiv.classList.add('message', 'ai-message');
            aiMessageDiv.innerHTML = `
              <img src="https://chatglm.cn/img/pc_20speed-min.e4bebda4.gif" alt="AI Avatar" style="border-radius:20px">
              <p></p>
            `;
            chatbox.appendChild(aiMessageDiv);
            chatbox.scrollTop = chatbox.scrollHeight;

            const aiResponse = data.response;
            const aiMessageP = aiMessageDiv.querySelector('p');
            let index = 0;
            const intervalId = setInterval(() => {
              if (index < aiResponse.length) {
                aiMessageP.textContent += aiResponse[index];
                index++;
                // 每次添加字符后，更新滚动高度
                chatbox.scrollTop = chatbox.scrollHeight; 
              } else {
                clearInterval(intervalId);
              }
            }, 100); // 每100毫秒显示一个字符
          });

          document.getElementById('user_input').value = '';
        }
      }
    </script>
  </body>
</html>
